<template>
  <el-dialog
    :title="dialogTitle"
    v-model="props.isVisble"
    @closed="closeDialog"
    width="800px"
  >
    <el-form ref="formRef" :model="form" label-width="120px">
      <template v-if="props.type === 'wjx' || props.type === 'add_wjx'">
        <XmFIntput
          label="标题:"
          quick
          prop="title"
          v-model="form.title"
        ></XmFIntput>
        <el-form-item
          :rules="[{ required: true, message: '不能为空' }]"
          prop="questionnaireId"
          label="问卷类型"
        >
          <xm-remote-select
            v-model="form.questionnaireId"
            v-model:label="form.questionnaireName"
            :defaults="form.defaults"
            :itemList="itemList"
            @loadData="dtLoad"
          ></xm-remote-select>
        </el-form-item>
        <XmFIntput
          isDisabled
          label="问卷链接 :"
          prop="wjxUrl"
          v-model="form.wjxUrl"
        ></XmFIntput>
      </template>
      <template v-else-if="props.type === 'edit'">
        <XmFIntput
          label="医院名称:"
          prop="name"
          v-model="form.name"
        ></XmFIntput>
        <XmFIntput
          label="医院地址:"
          prop="address"
          v-model="form.address"
        ></XmFIntput>
        <XmFIntput
          label="科室:"
          prop="department"
          v-model="form.department"
        ></XmFIntput>
        <XmFIntput
          label="科室电话:"
          prop="departmentPhone"
          v-model="form.departmentPhone"
        ></XmFIntput>
        <XmFIntput
          label="科室主任:"
          prop="departmentDirector"
          v-model="form.departmentDirector"
        ></XmFIntput>
        <XmFIntput
          label="联系电话:"
          prop="directorPhone	"
          v-model="form.directorPhone"
        ></XmFIntput>
      </template>
    </el-form>
    <template #footer>
      <el-button @click="closeDialog">取 消</el-button>
      <el-button type="primary" @click="onSubmit">确 定</el-button>
    </template>
  </el-dialog>
</template>
<script setup>
  import { ref, watch, watchEffect } from 'vue'
  import {
    modifyFlow,
    saveFlow,
    getFlowHospitaInfo,
    editFlowHospitaInfo,
  } from '@/api/modules/flow.js'
  import { ElLoading, ElMessage } from 'element-plus'
  import { useStore } from 'vuex'
  import XmRemoteSelect from 'XMC/XmRemoteSelect'
  const titleDic = {
    add_wjx: '新建初筛问诊',
    wjx: '编辑初筛问诊',
    edit: '编辑医院信息',
  }
  const form = ref({})
  const props = defineProps({
    isVisble: Boolean,
    type: String,
    // flowId: Number,
    // id: Number,
    flowData: {},
  })
  const emits = defineEmits(['update:isVisble', 'update:flowData', 'toUpdate'])
  const closeDialog = () => {
    emits('update:isVisble', false)
    emits('update:flowData', {})

    form.value = { wjxUrl: null, title: null, status: null, id: null }
    formRef.value.resetFields()
  }

  const formRef = ref()
  const onSubmit = () => {
    formRef.value.validate(async (valid) => {
      if (valid && (props.type === 'wjx' || props.type === 'add_wjx')) {
        emits('update:isVisble', false)
        if (form.value.id) {
          await modifyFlow({ ...form.value })
          emits('toUpdate')
        } else {
          await saveFlow({ ...form.value })
          emits('toUpdate')
        }
      } else if (valid && props.type === 'edit') {
        const { hospitalId, flowId } = props.flowData
        const data = { id: hospitalId, ...form.value, flowId }
        saveHospitaInfo(data)
      }
    })
  }

  const itemList = ref([])
  const store = useStore()
  const dialogTitle = ref('新建初筛问诊')
  watch(
    () => props.isVisble,
    (val) => {
      // type add_wjx wjx edit
      const { id, questionnaireId, hospitalId, title, wjxUrl } = props.flowData
      // 注入标题
      dialogTitle.value = titleDic[props.type]
      if (props.isVisble && hospitalId) {
        loadInfo(hospitalId)
      } else if (props.isVisble) {
        form.value = { id, questionnaireId, wjxUrl, title }
        dtLoad(() => {})
      }
    }
  )

  const dtLoad = async function (cb) {
    if (itemList.value.length > 0) {
      cb()
    } else {
      itemList.value = store.getters.questionnaireInfoList.map((item) => {
        return { value: item.id, label: item.title }
      })
      cb()
    }
  }
  const loading = ref(true)
  const loadInfo = async (hospitalId) => {
    const loadingInstance = ElLoading.service({ fullscreen: true })
    const res = await getFlowHospitaInfo({ id: hospitalId }).catch(() =>
      ElMessage.error('发生错误，请稍后再试')
    )
    loadingInstance.close()
    if (!res) return
    form.value = { ...res.data }
  }

  const saveHospitaInfo = async (data) => {
    const loadingInstance = ElLoading.service({ fullscreen: true })
    const res = await editFlowHospitaInfo(data).catch(() =>
      ElMessage.error('发生错误，请稍后再试')
    )
    loadingInstance.close()
    if (!res) return
    emits('update:isVisble', false)
    emits('toUpdate')
  }
</script>
<style></style>
